<template>
	<view class="info-search">
		<view class="nav-list">
			<scroll-view scroll-x :scroll-left="scrollLeft">
				<view class="nav-scroll">
					<view :class="[navClass(index)]" v-for="(item,index) in navList" :key="index"
						@click="changeScroll(index)">
						{{item.name}}
						<view class="line"></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 内容 -->
		<swiper :autoplay="false" :current="navCurrent" :skip-hidden-item-layout="true" @change="swiperChange">
			<swiper-item>
				<view class="box-list">
					<view class="box-item">
						<view class="label">
							<view class="img-icon" type="info"></view>基本信息
						</view>
						<view class="items">
							<view class="item">
								<view class="item-label">罐车号牌</view>
								<view class="item-content">{{ res.baseInformation.vehCode }}</view>
							</view>
							<view class="item">
								<view class="item-label">车牌颜色</view>
								<view class="item-content">{{ res.baseInformation.vehColor }}</view>
							</view>
							<view class="item">
								<view class="item-label">营运状态</view>
								<view class="item-content">{{ res.baseInformation.state }}</view>
							</view>
							<view class="item">
								<view class="item-label">所属企业</view>
								<view class="item-content">{{ res.baseInformation.ownerName }}</view>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="label">
							<view class="img-icon" type="info"></view>道路运输证信息
						</view>
						<view class="items">
							<view class="item">
								<view class="item-label">道路运输证号</view>
								<view class="item-content">{{ res.baseInformation.ccertId }}</view>
							</view>
							<view class="item">
								<view class="item-label">有效期起</view>
								<view class="item-content">{{ res.baseInformation.firstDate }}</view>
							</view>
							<view class="item">
								<view class="item-label">有效期止</view>
								<view class="item-content">{{ res.baseInformation.expireDate }}</view>
							</view>
							<view class="item">
								<view class="item-label">经营范围代码</view>
								<view class="item-content">{{ res.baseInformation.mgrCode }}</view>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="label">
							<view class="img-icon" type="info"></view>罐箱详情
						</view>
						<view class="items">
							<view class="item">
								<view class="item-label">制造厂编号</view>
								<view class="item-content">{{ res.baseInformation.manufacturerNo }}</view>
							</view>
							<view class="item">
								<view class="item-label">制造日期</view>
								<view class="item-content">{{ res.baseInformation.manufacturerDate }}</view>
							</view>
							<view class="item">
								<view class="item-label">集装箱代码(ISO)</view>
								<view class="item-content">{{ res.baseInformation.containerCode }}</view>
							</view>
							<view class="item">
								<view class="item-label">UN罐柜导则</view>
								<view class="item-content">{{ res.baseInformation.tankGuide }}</view>
							</view>
							<view class="item">
								<view class="item-label">空箱质量</view>
								<view class="item-content">{{ res.baseInformation.tareMass }}</view>
							</view>
							<view class="item">
								<view class="item-label">最大营运质量</view>
								<view class="item-content">{{ res.baseInformation.maxServiceMass }}</view>
							</view>
							<view class="item">
								<view class="item-label">最大载质量</view>
								<view class="item-content">{{ res.baseInformation.maxLoadMass }}</view>
							</view>
							<view class="item">
								<view class="item-label">容积</view>
								<view class="item-content">{{ res.baseInformation.volume }}</view>
							</view>
							<view class="item">
								<view class="item-label">性能参数</view>
								<view class="item-content">{{ res.baseInformation.parameter }}</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="box-list">
					<view class="box-item">
						<view class="label">
							<view class="img-icon" type="info"></view>基本信息
						</view>
						<view class="items">
							<view class="item">
								<view class="item-label">罐车号牌</view>
								<view class="item-content">{{ res.baseInformation.vehCode }}</view>
							</view>
							<view class="item">
								<view class="item-label">车牌颜色</view>
								<view class="item-content">{{ res.baseInformation.vehColor }}</view>
							</view>
							<view class="item">
								<view class="item-label">营运状态</view>
								<view class="item-content">{{ res.baseInformation.state }}</view>
							</view>
							<view class="item">
								<view class="item-label">所属企业</view>
								<view class="item-content">{{ res.baseInformation.ownerName }}</view>
							</view>
						</view>
					</view>
					<view class="box-item" v-for="(item,index) in res.tankinspVoList" :key="index">
						<view class="label">
							<view class="img-icon" type="info"></view>定期检验信息
						</view>
						<view class="items">
							<view class="item">
								<view class="item-label">检验机构</view>
								<view class="item-content">{{item.testMechanism}}</view>
							</view>
							<view class="item">
								<view class="item-label">检验日期</view>
								<view class="item-content">{{item.testDate}}</view>
							</view>
							<!-- <view class="item">
								<view class="item-label">检验报告编号</view>
								<view class="item-content">1235798738741289</view>
							</view> -->
							<view class="item">
								<view class="item-label">检验报告</view>
								<view class="item-content">
									<image style="width:34rpx;height: 34rpx;" src="../../../../static/image/folder.png"
										mode="" @click="handlePdf(item)">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollLeft: 0,
				navCurrent: 0,
				navList: [{
					name: '罐式集装箱信息',
				}, {
					name: '定期检验信息',
				}],
				res: {
					baseInformation: {},
					tankinspVoList: [],
				}
			};
		},
		methods: {
			// 监听点击右上角事件
			onNavigationBarButtonTap() {
				this.$goBack(1, 1);
			},
			handlePdf(item) {
				this.$goBack('/pages/dgs_qy/preview/index?url=' + encodeURIComponent(item.testReportRoute))
			},
			changeScroll(index) {
				this.navCurrent = index
				uni.createSelectorQuery().in(this).selectAll('.nav-item').boundingClientRect(list => {
					const {
						left,
						width
					} = list[index];
					let scrollLeft = 0;
					for (var i = 0; i <= index; i++) {
						scrollLeft += list[i].width;
					}
					if (left + width > this.boxWidth) {
						this.$nextTick(() => {
							this.scrollLeft = scrollLeft - this.boxWidth + 10
						})
					} else if (left < 0) {
						this.$nextTick(() => {
							this.scrollLeft = scrollLeft - width - 10
						})
					}
				}).exec()
			},
			swiperChange(event) {
				const index = event.detail.current;
				const navItem = this.navList[index]
				navItem.isInit = true;
				if (this.navCurrent == index) {
					return;
				}
				this.changeScroll(index)
			},
			navClass(index) {
				return ['nav-item', {
					'cur': index == this.navCurrent
				}]
			},

		},
		onLoad() {
			Object.assign(this.res, this.$store.getters.getTempData)
		},
		mounted() {
			uni.createSelectorQuery().in(this).selectAll('.nav-item').boundingClientRect(list => {
				let width = 0
				list.forEach((item, index) => {
					width += item.width;
				})
				this.scrollWidth = width
			}).exec();
			uni.createSelectorQuery().in(this).select('.nav-scroll').boundingClientRect(data => {
				this.boxWidth = data.width
			}).exec();
		}
	}
</script>

<style lang="scss">
	.info-search {
		background: #f5f5f5;
	}

	.nav-list {
		background: #fff;
		height: 90rpx;
		padding-top: 28rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

		.nav-scroll {
			white-space: nowrap;
			padding: 0 12rpx;


			.nav-item {
				display: inline-block;
				font-size: 28rpx;
				color: #333;
				padding: 0 12rpx;
				line-height: 88rpx;

				.line {
					opacity: 0;
					border-radius: 4rpx;
					height: 4rpx;
					background: #007AFF;
					width: 100rpx;
					margin: 0 auto;
					transition: all 0.4s;
				}

				&.cur {
					.line {
						opacity: 1;
					}
				}
			}
		}

	}

	.box-list {
		padding: 14rpx 34rpx;

		.box-item {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 14rpx;

			.label {
				font-size: 28rpx;
				color: #333;
				line-height: 30rpx;
				height: 30rpx;
				padding: 26rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F0F0F0;


				.img-icon {
					margin-right: 10rpx;
				}
			}

			.items {
				padding: 14rpx 28rpx;

				.item {
					font-size: 28rpx;
					line-height: 42rpx;
					padding: 14rpx 0;
					display: flex;

					.item-label {
						color: #666;
						width: 260rpx;
					}

					.item-content {
						color: #333;
						flex: 1;
					}
				}

			}
		}
	}
</style>